<template>
  <div class="project-details">
    <!-- 项目模块主体情况 -->
    <el-collapse v-model="activeNames">
      <el-collapse-item name="1">
        <template slot="title">
          <h4 class="module-title">项目反馈情况</h4>
        </template>
        <el-card>
          <search-component :colum="colum" :formValue="formValue" class="search"
                            @search="getAnalysisInfo" @reset="reset"></search-component>
          <vxe-grid
              border
              context-menu
              highlight-hover-row
              show-overflow
              resizable
              :toolbar="tableToolbar"
              export-config
              height="700"
              :data="tableData"
              show-footer
              :footer-method="footerMethod" >
            <vxe-table-column field="Projectname" title="项目名称" min-width="100" sortable></vxe-table-column>
            <vxe-table-column field="Typename" title="分类" min-width="70" sortable></vxe-table-column>
            <vxe-table-column field="Status10" title="待确认" sortable></vxe-table-column>
            <vxe-table-column field="Status11" title="确认中" sortable></vxe-table-column>
            <vxe-table-column field="Status12" title="确认完成" sortable></vxe-table-column>
            <vxe-table-column field="Status20" title="对应中" sortable></vxe-table-column>
            <vxe-table-column field="Status21" title="待开始" sortable></vxe-table-column>
            <vxe-table-column field="Status22" title="连接测试完成" sortable></vxe-table-column>
            <vxe-table-column field="Status30" title="系统测试OK" sortable></vxe-table-column>
            <vxe-table-column field="Status31" title="待系统测试" sortable></vxe-table-column>
            <vxe-table-column field="Status32" title="系统测试NG" sortable></vxe-table-column>
            <vxe-table-column field="Status40" title="业务验收OK" sortable></vxe-table-column>
            <vxe-table-column field="Status41" title="待业务验收" sortable></vxe-table-column>
            <vxe-table-column field="Status42" title="业务验收NG" sortable></vxe-table-column>
            <vxe-table-column field="Status50" title="取消" sortable></vxe-table-column>
            <vxe-table-column field="Status51" title="待取消" sortable></vxe-table-column>
            <vxe-table-column field="Status70" title="保留" sortable></vxe-table-column>
            <vxe-table-column field="Status80" title="待客户验收" sortable></vxe-table-column>
            <vxe-table-column field="Status81" title="客户验收OK" sortable></vxe-table-column>
            <vxe-table-column field="Status82" title="客户验收NG" sortable></vxe-table-column>
            <vxe-table-column field="Status90" title="已关闭" sortable></vxe-table-column>
            <vxe-table-column field="Total" title="合计" min-width="90" sortable></vxe-table-column>
          </vxe-grid>
        </el-card>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import searchComponent from "@/components/element/layoutComponents/searchFrom/searchComponent.vue";
import DictionarySelect from "@/components/element/select/DictionarySelect";
import SelectProject from "@/components/element/select/SelectProject";
import projectApi from '@/api/projectApi';
export default {
  components: {
    searchComponent,
    SelectProject
  },
  data() {
    return {
      tableToolbar: {
        export: true
      },
      formValue: {
        // acceptid: [],
        // moduleid: [],
        // type: [],
        // creatId: [],
        // env: [],
        // level: [],
        // createStarted: [],
        // createEnd: []
      },
      colum: [
        {
          placeholder: '请选择项目',
          selectTitle: '项目',
          prop: 'projectid',
          size: 'small',
          componentName: SelectProject,
          value: 'projectid',
          ref: 'projectid',
          clearable: true,
          show: true,
          attrs: {
            multiple: true,
            column: [
              { field: 'Name' }
            ],
          },
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择反馈环境',
          prop: 'env',
          size: 'small',
          dictTypeCode: 'ENV',
          componentName: DictionarySelect,
          value: 'env',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择分类',
          prop: 'type',
          size: 'small',
          dictTypeCode: 'TEST_TYPE',
          componentName: DictionarySelect,
          value: 'type',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择级别',
          prop: 'level',
          size: 'small',
          dictTypeCode: 'LEVEL',
          componentName: DictionarySelect,
          value: 'level',
          clearable: true,
          show: true,
          multiple: true,
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择创建开始时间',
          prop: 'createStarted',
          size: 'small',
          componentName: 'el-date-picker',
          value: 'createStarted',
          clearable: true,
          show: true,
          multiple: true,
          attrs: {
            'value-format': 'timestamp'
          },
          elcolStyle: {
            'width': '200px'
          }
        },
        {
          placeholder: '请选择创建结束时间',
          prop: 'createEnd',
          size: 'small',
          componentName: 'el-date-picker',
          value: 'createEnd',
          clearable: true,
          show: true,
          multiple: true,
          attrs: {
            'value-format': 'timestamp'
          },
          elcolStyle: {
            'width': '200px'
          }
        }

      ],
      projectInfo: {},
      tableData: [],
      activeNames: ['1']
    }
  },
  computed: {
  },
  created() {
    this.getAnalysisInfo()
  },
  methods: {
    footerMethod({columns,data}) {
      return [
        columns.map((column, columnIndex) => {
          if (columnIndex === 0) {
            return '和值'
          }
          if (['Status10', 'Status11', 'Status12', 'Status20', 'Status21','Status22', 'Status30','Status31','Status32','Status40', 'Status41', 'Status42', 'Status50',  'Status51', 'Status70', 'Status80','Status81','Status82','Status90','Total'].includes(column.property)) {
            return XEUtils.sum(data, column.property)
          }
          return null
        })
      ]
    },
    getAnalysisInfo() {
      let query = JSON.parse(JSON.stringify(this.formValue))
      if (query.createStarted) {
        query.createStarted = query.createStarted / 1000
      }
      if (query.createEnd) {
        query.createEnd = query.createEnd / 1000
      }
      if (query.createStarted && query.createEnd && query.createStarted === query.createEnd) {
        query.createEnd = query.createEnd + (60 * 60 * 24)
      }
      projectApi.getAnalysis(query).then(res => {
        this.tableData = res
      })

    },
    reset() {
      this.formValue = {
      }
    },
  }
}
</script>

<style lang="scss" scoped src="@/assets/css/page/projectManage/details.scss"></style>
